<template>
  <div class="date-info-box">
    <div class="info-yang">
      <img :src="fuPng" alt="" srcset="" />
      {{ info.year }}年{{ info.month + 1 }}月
      <img :src="fuPng" alt="" srcset="" />
    </div>
    <div class="info-gz">{{ info.gzYear }} [{{ info.Animal }}] 年 {{ info.gzMonth }}月 {{ info.gzDay }}日</div>
    <div class="info-day">{{ info.day }}</div>
    <div class="info-week">{{ info.ncWeek }}</div>
    <div class="info-nong">
      {{ info.IMonthCn + info.IDayCn }}
      <span v-if="info.isTerm">[{{ info.Term }}]</span>
    </div>

    <div class="info-content">
      相逢是人生美丽的风景，一个挥手，一个微笑，一声问候，把两个素不相识的人联系在一起。然后又各自分开，又消失在苍茫的人流里。人生的相逢和相遇就每天这样来了、去了。
    </div>

    <span class="corner">恭</span>
    <span class="corner">喜</span>
    <span class="corner">发</span>
    <span class="corner">财</span>
  </div>
</template>

<script lang="ts" setup>
  import { toRefs, PropType } from 'vue';
  import fuPng from '@/assets/images/fu.png';
  import { baseDate } from 'src/utils/dateUtils';
  const props = defineProps({
    info: {
      type: Object as PropType<baseDate>,
      require: true,
      default: () => ({}),
    },
  });
  const { info } = toRefs(props);
</script>

<style lang="scss" scoped>
  $calendarMain: #be7e4a;
  $cornerSize: 18px;
  $cornerAddr: -12px;
  .date-info-box {
    background: #fff;
    margin: 20px;
    padding: 10px;
    box-shadow: 0 0 0 3px $calendarMain, 0 0 0 6px white, 0 0 0 9px $calendarMain;
    height: calc(100% - 60px);
    position: relative;

    .corner {
      position: absolute;
      border-radius: 50%;
      background: $calendarMain;
      color: #fff;
      width: $cornerSize;
      height: $cornerSize;
      font-size: 12px;
      line-height: $cornerSize;
      text-align: center;
      box-shadow: 0 0 0 2px white, 0 0 0 4px $calendarMain;

      &:nth-of-type(1) {
        top: $cornerAddr;
        left: $cornerAddr;
      }
      &:nth-of-type(2) {
        top: $cornerAddr;
        right: $cornerAddr;
      }
      &:nth-of-type(3) {
        bottom: $cornerAddr;
        left: $cornerAddr;
      }
      &:nth-of-type(4) {
        right: $cornerAddr;
        bottom: $cornerAddr;
      }
    }

    .info-yang {
      text-align: center;
      line-height: 30px;
      padding-top: 20px;
      padding-bottom: 10px;
      img {
        vertical-align: middle;
      }
    }

    .info-gz {
      background: $calendarMain;
      text-align: center;
      padding: 5px 0;
      color: #fff;
    }
    .info-day {
      font-size: 100px;
      color: $calendarMain;
      text-align: center;
      padding: 50px 0 20px 0;
    }

    .info-week {
      font-size: 22px;
      font-weight: bold;
      color: $calendarMain;
      text-align: center;
      font-family: '宋体';
    }

    .info-nong {
      font-size: 20px;
      text-align: center;
      font-family: '宋体';
      color: $calendarMain;
      font-weight: bold;
      padding: 20px 0 20px 0;
    }
    .info-content {
      border-top: 1px dashed $calendarMain;
      padding: 10px 0 0 10px;
      line-height: 24px;
      font-family: '隶书';
      color: $calendarMain;
      text-indent: 30px;
    }
  }
</style>
